<template>
  <div id="app">
    <!-- 右键菜单 -->
    <div v-if="showContextMenu" :style="contextMenuStyle" class="context-menu" @click="hideContextMenu">
      <div class="menu-item" @click="highlightMessage">高亮</div>
      <div class="menu-item" @click="unhighlightMessage">取消高亮</div>
      <div class="menu-item" @click="deleteMessage">删除</div>
    </div>
    <!-- 左侧对话列表 -->
    <div id="sidebar">
      <div class="sidebar-header">
        <button @click="newConversation">新建对话</button>
      </div>
      <div class="conversation-list">
        <div v-for="conv in conversations" :key="conv.id"
          :class="['conversation-item', { active: conv.id === currentConversationID }]"
          @click="switchConversation(conv.id)"
          @mouseenter="showButtons(conv.id)" @mouseleave="hideButtons(conv.id)">
          <span v-if="!conv.isEditing">{{ conv.title }}</span>
          <input v-else v-model="conv.title" @blur="saveConversationTitle(conv)"
            @keypress.enter="saveConversationTitle(conv)" />
          <div class="action-buttons" v-if="conv.showButtons">
            <button class="edit-button" @click.stop="editConversationTitle(conv)">编辑</button>
            <button class="delete-button" @click.stop="deleteConversation(conv.id)">删除</button>
          </div>
        </div>
      </div>

      <div id="zoom-controls">
        <button @click="zoomIn">放大</button>
        <button @click="zoomOut">缩小</button>
        <button @click="resetZoom">重置</button>
      </div>
    </div>

    <!-- 右侧聊天框 -->
    <div id="chat-container">
      <div id="chat-box" @click="hideContextMenu">
        <div v-for="(message, index) in filteredMessages" :key="index"
          :class="['message', message.isUser ? 'user' : 'bot', { highlighted: message.isHighlighted }]"
          @contextmenu.prevent="showMenu($event, index)">
          <div class="message-content">{{ message.text }}</div>
        </div>
      </div>
      <!-- 过滤选项 -->
      <div id="filter-box">
        <label>
          <input type="checkbox" v-model="filters.showEnglish" /> 只显示英文
        </label>
        <label>
          <input type="checkbox" v-model="filters.showTranslation" /> 只显示翻译
        </label>
        <label>
          <input type="checkbox" v-model="filters.showHighlighted" /> 只显示高亮
        </label>
      </div>
      <div id="input-box">
        <input v-model="inputText" type="text" placeholder="输入英文..." @keypress.enter="sendMessage" />
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: '', // 用户输入的文本
      conversations: [], // 对话列表
      currentConversationID: null, // 当前选中的对话ID
      currentMessages: [], // 当前对话的聊天记录
      showContextMenu: false, // 是否显示右键菜单
      contextMenuStyle: { top: '0', left: '0' }, // 右键菜单的位置
      selectedMessageIndex: null, // 当前选中的消息索引
      filters: {
        showEnglish: false, // 只显示英文
        showTranslation: false, // 只显示翻译
        showHighlighted: false, // 只显示高亮
      },
    };
  },
  async created() {
    // 初始化时加载对话列表
    this.conversations = await window.go.main.App.GetConversations();
    if (this.conversations.length > 0) {
      await this.switchConversation(this.conversations[0].id);
    }
  },
  computed: {
    // 根据过滤条件筛选消息
    filteredMessages() {
      return this.currentMessages.filter((message) => {
        const isEnglish = message.isUser; // 用户消息是英文
        const isTranslation = !message.isUser; // 非用户消息是翻译
        const isHighlighted = message.isHighlighted; // 是否高亮

        // 根据勾选框的状态过滤消息
        if (this.filters.showEnglish && !isEnglish) return false;
        if (this.filters.showTranslation && !isTranslation) return false;
        if (this.filters.showHighlighted && !isHighlighted) return false;

        return true;
      });
    },
  },
  methods: {
    // 放大界面
    zoomIn() {
      document.body.style.zoom = parseFloat(document.body.style.zoom || 1) + 0.1;
    },
    // 缩小界面
    zoomOut() {
      document.body.style.zoom = parseFloat(document.body.style.zoom || 1) - 0.1;
    },
    // 重置缩放
    resetZoom() {
      document.body.style.zoom = 1;
    },
    // 显示操作按钮
    showButtons(conversationID) {
      const conversation = this.conversations.find(conv => conv.id === conversationID);
      if (conversation) {
        conversation.showButtons = true;
      }
    },
    // 隐藏操作按钮
    hideButtons(conversationID) {
      const conversation = this.conversations.find(conv => conv.id === conversationID);
      if (conversation) {
        conversation.showButtons = false;
      }
    },
    // 删除对话
    async deleteConversation(conversationID) {
      const confirmDelete = confirm("确定要删除此对话吗？");
      if (confirmDelete) {
        await window.go.main.App.DeleteConversation(conversationID);
        this.conversations = this.conversations.filter(conv => conv.id !== conversationID);
        if (this.currentConversationID === conversationID) {
          this.currentConversationID = null;
          this.currentMessages = [];
        }
      }
    },
    // 新建对话
    async newConversation() {
      const newConv = await window.go.main.App.NewConversation();
      this.conversations.push(newConv);
      await this.switchConversation(newConv.id);
    },
    // 编辑对话标题
    editConversationTitle(conv) {
      conv.isEditing = true;
    },
    // 保存对话标题
    async saveConversationTitle(conv) {
      conv.isEditing = false;
      await window.go.main.App.UpdateConversationTitle(conv.id, conv.title);
    },
    // 切换对话
    async switchConversation(id) {
      this.currentConversationID = id;
      await window.go.main.App.SetCurrentConversation(id);
      this.currentMessages = await window.go.main.App.GetCurrentConversationMessages();
    },
    // 发送消息
    async sendMessage() {
      const text = this.inputText.trim();
      if (!text) {
        alert('请输入内容');
        return;
      }

      // 添加用户消息
      await window.go.main.App.AddMessage(text, true);
      this.currentMessages.push({ text, isUser: true });

      // 清空输入框
      this.inputText = '';

      try {
        // 调用后端的 Translate 函数
        const translatedText = await window.go.main.App.Translate(text);

        // 添加翻译消息
        await window.go.main.App.AddMessage(translatedText, false);
        this.currentMessages.push({ text: translatedText, isUser: false });
      } catch (error) {
        console.error('翻译失败:', error);
        this.currentMessages.push({ text: '翻译失败，请重试', isUser: false });
      }

      // 滚动到底部
      this.$nextTick(() => {
        const chatBox = document.getElementById('chat-box');
        chatBox.scrollTop = chatBox.scrollHeight;
      });
    },
    // 显示右键菜单
    showMenu(event, index) {
      // 只允许在用户消息上显示右键菜单
      if (this.currentMessages[index].isUser) {
        this.selectedMessageIndex = index;
        this.showContextMenu = true;
        this.contextMenuStyle = {
          top: `${event.clientY}px`,
          left: `${event.clientX}px`,
        };
      }
    },
    // 隐藏右键菜单
    hideContextMenu() {
      this.showContextMenu = false;
    },
    // 删除消息
    async deleteMessage() {
      if (this.selectedMessageIndex !== null) {
        // 删除用户消息和对应的翻译
        await window.go.main.App.DeleteMessages(this.currentConversationID, this.selectedMessageIndex);
        this.currentMessages.splice(this.selectedMessageIndex, 2);
        this.selectedMessageIndex = null;
      }
      this.hideContextMenu();
    },
    // 高亮消息
    async highlightMessage() {
      if (this.selectedMessageIndex !== null) {
        // 更新用户消息和对应翻译的高亮状态
        await window.go.main.App.UpdateMessageHighlight(
          this.currentConversationID,
          this.selectedMessageIndex,
          true
        );
        await window.go.main.App.UpdateMessageHighlight(
          this.currentConversationID,
          this.selectedMessageIndex + 1,
          true
        );
        // 刷新当前对话的聊天记录
        this.currentMessages = await window.go.main.App.GetCurrentConversationMessages();
      }
      this.hideContextMenu();
    },
    // 取消高亮
    async unhighlightMessage() {
      if (this.selectedMessageIndex !== null) {
        // 更新用户消息和对应翻译的高亮状态
        await window.go.main.App.UpdateMessageHighlight(
          this.currentConversationID,
          this.selectedMessageIndex,
          false
        );
        await window.go.main.App.UpdateMessageHighlight(
          this.currentConversationID,
          this.selectedMessageIndex + 1,
          false
        );
        // 刷新当前对话的聊天记录
        this.currentMessages = await window.go.main.App.GetCurrentConversationMessages();
      }
      this.hideContextMenu();
    },
  },
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  background-color: #f5f5f5;
}

#app {
  display: flex;
  width: 100%;
  height: 100%;
}

#sidebar {
  width: 250px;
  background-color: #2c3e50;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.sidebar-header {
  padding: 10px;
  border-bottom: 1px solid #34495e;
}

.sidebar-header button {
  width: 100%;
  padding: 10px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.sidebar-header button:hover {
  background-color: #2980b9;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 5px;
}

.edit-button {
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 3px;
  /* padding: 5px 10px; */
  cursor: pointer;
}

.edit-button:hover {
  background-color: #cc0000;
}

.delete-button {
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 3px;
  /* padding: 5px 10px; */
  cursor: pointer;
}

.delete-button:hover {
  background-color: #cc0000;
}

.conversation-list {
  flex: 1;
  overflow-y: auto;
}

.conversation-item {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.conversation-item:hover {
  background-color: #34495e;
}

.conversation-item.active {
  background-color: #3498db;
}

.conversation-item input {
  flex: 1;
  margin-right: 10px;
  padding: 5px;
  border: none;
  border-radius: 3px;
}

#chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#chat-box {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #fff;
}

.message {
  margin-bottom: 10px;
  display: flex;
}

.message.user {
  justify-content: flex-end;
}

.message.bot {
  justify-content: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 10px;
  border-radius: 10px;
  margin: 5px 0;
  /* 增加消息之间的间距 */
}

.message.user .message-content {
  background-color: #007bff;
  /* 用户消息背景色 */
  color: #fff;
  /* 用户消息文字颜色 */
  text-align: left;
}

.message.bot .message-content {
  background-color: #f1f1f1;
  /* 翻译消息背景色 */
  color: #333;
  /* 翻译消息文字颜色 */
  text-align: left;
}

/* 高亮消息的背景色 */
.message.highlighted .message-content {
  background-color: #fc7c7c !important;
  color: #fff;
  /* 红色背景 */
}

#input-box {
  display: flex;
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
}

#input-box input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  margin-right: 10px;
}

#input-box button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#input-box button:hover {
  background-color: #0056b3;
}

.context-menu {
  position: fixed;
  background-color: #5c5c5c;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #2b2a2a;
}

#filter-box {
  padding: 10px;
  background-color: #fff;
  border-top: 1px solid #ddd;
  display: flex;
  gap: 10px;
}

#filter-box label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #333;
}

#zoom-controls {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  gap: 10px;
}

#zoom-controls button {
  padding: 5px 10px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

#zoom-controls button:hover {
  background-color: #2980b9;
}
</style>